<template>
  <div class="dimension-assign-user">
    <InnerPageTable ref="userTable" :config="tableConfig">
      <div slot="table-bar">
        <div class="table-bar-solt">
          <div class="table-bar-button">
            <RPButton optType="common" :text="$t('module.dataPermission.assignUser')" @click="assignUser" />
            <RPButton optType="delete" @click="deleted()" />
          </div>
          <div class="table-bar-input input_color">
            <Input
              v-model="searchForm.nameOrCode"
              :placeholder="$t('module.dataPermission.searchUser')"
              style="color: #515a6e;"
              icon="ios-search"
              small
              @on-enter="onSearch"
              @on-click="onSearch"
            />
          </div>
        </div>
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import { assignUserColumns } from "./columns.js";
import locales from "./locales.js";
import dataPermissionAPI from "@/api/dataPermissionAPI.js";
import DimensionSelectUser from "./DimensionSelectUser.vue";
import { queryOrgsByOrgPaths } from "@/api/orgApi";

export default {
  name: "dimension-assign-user",
  mixins: [locales],
  props: {
    dataStructType: { type: String, required: true },
    tenantCode: { type: String, required: true },
    dimensionId: { type: String, required: true }
  },
  data() {
    return {
      searchForm: {
        tenantCode: this.tenantCode,
        policyDimensionRelId: this.dimensionId,
        nameOrCode: ""
      }
    };
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: tableObj => {
          let { responseProcess, param } = tableObj;
          dataPermissionAPI.queryAssignedUser(param).then(data => {
            let orgPaths = data.records.map(user => {
              return user.orgPath;
            });

            queryOrgsByOrgPaths(orgPaths).then(orgs => {
              data.records.forEach(user => {
                let userOrg = orgs.find(org => {
                  return org.orgPath == user.orgPath;
                });
                user._hasOrgInfo = true;
                if (userOrg) {
                  user.orgName = userOrg.orgName;
                  user.orgNameFullPath = userOrg.orgNameFullPath;
                } else {
                  user.orgName = user.orgPath;
                  user.orgNameFullPath = user.orgPath;
                }
              });
              tableObj.tableData = data.records;
            });
            responseProcess(data);
          });
        },
        initParam: this.searchForm,
        columnsFn: assignUserColumns.bind(this),
        autoFirst: true,
        rowClickHandle: this.onRowClick,
        highlightRow: true,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  mounted() {},
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //enabled:1-有效，0-无效
      if (row?.enabled !== 0 && row?._isHighlight) {
        return 'hightLightCurrentRow'
      }
      if (row.enabled == 0) {
        return "tableDisableStyle";
      }
    },
    search(page = 1) {
      // 搜索name或者code
      this.$refs["userTable"].load(this.searchForm, page);
    },
    assignUser() {
      new this.$pageModal(
        DimensionSelectUser,
        {
          props: {
            tenantCode: this.tenantCode,
            dimensionId: this.dimensionId
          }
        },
        data => {
          data && this.search();
        }
      );
    },
    deleted(id) {
      let selectedIds;
      if (id) {
        selectedIds = [id];
      } else {
        selectedIds = this.getSelectedIds();
        if (selectedIds.length == 0) {
          this.$message.error(this.$t("module.role.warning.selectUsers"));
          return;
        }
      }

      new $confirm(this.$t("module.dataPermission.warning.confirmDeleteAssignedUser"), this).then(() => {
        dataPermissionAPI.deleteAssignedUser(selectedIds).then(res => {
          this.$message.success({
            content: this.$t("module.orgManage.deleteSuccess"),
            duration: 3
          });
          // 刷新权限数据
          this.$emit("change", null);
          this.search();
        });
      });
    },
    getSelectedIds() {
      let list = this.$refs["userTable"].getSelectioned() || [];
      let ids = [];
      for (let { id } of list) {
        ids.push(id);
      }
      return ids;
    },
    onSearch() {
      this.search();
    },
    onRowClick(data) {
      this.$emit("change", data);
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.dimension-assign-user {
  height: 100%;
  .table-bar-solt {
    display: flex;
    justify-content: space-between;
    .table-bar-button {
      display: flex;
    }
    .table-bar-input {
      width: 60%;
    }
    .input_color {
      .ivu-input-inner-container {
        input {
          color: #515a6e;
        }
      }
    }
  }
  .input-search {
    float: right;
    width: 200px;
    z-index: 99;
    input {
      color: #515a6e;
    }
  }
  .ivu-spin {
    text-align: left;
  }
  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  .ivu-table .hightLightCurrentRow td {
    background-color: var(--primary-color-8);;
  }
}
@media screen and (max-width: 1400px) {
  .table-bar {
    // height: 80px !important;
    position: relative;
    .searchUserInput {
      position: absolute;
      left: 0;
      top: 50px;
    }
  }
}
</style>
